<template>
  <div class="app-container page_scroll">
    <div class="employee_content">
      <!-- 左侧树 开始 -->
      <div class="left_tree">
        <div class="tree_btn_box">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addStore()"
            >新增门店</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addTeam()"
            >新增团队</el-button
          >
        </div>
        <el-tree
          :data="treeList"
          class="el_tree"
          :props="treeProps"
          highlight-current
          @node-click="nodeClickEvent"
          size="mini"
        >
          <div class="tree_node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <el-button
              type="text"
              size="mini"
              class="btn"
              @click="() => editEvent(node, data)"
              >编辑</el-button
            >
          </div>
        </el-tree>
      </div>
      <!-- 左侧树 end -->

      <!-- 右侧列表 开始 -->
      <div class="right_content">
        <QueryForm
          v-model="form"
          @search="getEmployeeList"
          @update="updateEmployeeAction"
          @update-status="updateRestStatus"
          @add="openDialog"
        />
        <StaffTable
          :list="employeeList"
          @change="onChange"
          @add="onAddChange"
          ref="staffTable"
        />
        <BasePagination
          v-model="page.page"
          :total="totalCount"
          @change="pageOnChange"
        />
      </div>
      <!-- 右侧列表 end -->
    </div>

    <!-- 新增员工弹框 开始 -->
    <glsx-dialog
      :show="showDialog"
      :title="status == 'add' ? '新增员工' : '编辑员工'"
      @close="closeDialog()"
    >
      <create-staff
        v-if="showDialog"
        :data="current"
        :status="status"
        @confirm="onConfirm"
      ></create-staff>
    </glsx-dialog>
    <!-- 新增员工弹框 end -->
  </div>
</template>
<script>
import { getEmployeeList, updateEmployeeAction } from "@/api/employee/index";
import QueryForm from "./_components/QueryForm.vue";
import StaffTable from "./_components/StaffTable.vue";
import { GET_MANAGEMENT_TREE } from "@/http/public";
import CreateStaff from "./StaffCreate";
import { broadcast } from "@/utils/util";
import { UPDATE_EMPLOYEE_STATUS } from "@/http/system";
export default {
  name: "StaffManage",
  components: { QueryForm, StaffTable, CreateStaff },
  data() {
    return {
      form: {
        teamId: "",
        shopId: "",
        name: "",
        phone: "",
      },
      employeeList: [],
      totalCount: 0,
      page: {
        page: 1,
        size: 100,
      },
      inputDialog: {
        visible: false,
        content: {},
      },
      treeList: [],
      treeProps: {
        children: "teamList",
        label: "name",
      },
      showDialog: false,
      current: {},
      status: "add",
      currentNode: "",
    };
  },
  created() {
    this.getEmployeeList();
    this.getTree();
  },
  methods: {
    async getEmployeeList() {
      this.showAppLoading();
      const params = {
        paramObject: this.form,
        ...this.page,
      };
      const res = await getEmployeeList(params);
      this.hideAppLoading();
      if (!res.result) return;
      this.employeeList = res.data.dataList;
      this.totalCount = res.data.totalCount;
      this.page.page = res.data.page;
    },
    async updateEmployeeAction(obj) {
      const idList = this.$refs.staffTable.idList;
      if (!idList.length) return this.$message.error("请先勾选员工");
      const params = {
        idList,
        ...obj,
      };
      await updateEmployeeAction(params);
      this.getEmployeeList();
      this.$message.success("修改员工信息成功！");
    },

    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getEmployeeList();
    },

    // 监听表格变化
    onChange(e) {
      this.getEmployeeList();
    },

    // 获取树
    getTree() {
      GET_MANAGEMENT_TREE().then((res) => {
        this.treeList = res.data || [];
      });
    },

    // 监听树节点点击事件
    nodeClickEvent(data) {
      console.log(data);
      this.currentNode = data;
      if (data.teamList) {
        // 门店
        this.$set(this.form, "shopId", data.id);
      } else {
        // 团队
        this.$set(this.form, "teamId", data.id);
      }
      this.getEmployeeList();
    },

    // 打开新增弹框
    openDialog() {
      this.showDialog = true;
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.status = "add";
    },

    // 监听表格编辑按钮
    onAddChange(row) {
      console.log(row);
      this.current = row;
      this.status = "edit";
      this.openDialog();
    },

    onConfirm() {
      this.closeDialog();
      this.getEmployeeList();
    },

    // 新增门店
    addStore() {
      broadcast("look.user.store", { type: "add" });
    },

    // 新增团队
    addTeam() {
      broadcast("look.user.team", { type: "add" });
    },

    // 编辑门店、团队
    editEvent(node, data) {
      console.log(data);
      if (data.teamList) {
        // 门店
        broadcast("look.user.store", { type: "edit", data: data });
      } else {
        // 团队
        broadcast("look.user.team", { type: "edit", data: data });
      }
    },

    // 开启、关闭休息模式
    updateRestStatus(status) {
      let _this = this;
      let idList = this.$refs.staffTable.idList;
      if (!idList.length) {
        this.$message.error("请先勾选员工");
        return false;
      }
      let params = {};
      params.id = idList.toString();
      params.state = status;
      console.log(params);
      UPDATE_EMPLOYEE_STATUS(params).then((res) => {
        if (res.code == 200) {
          _this.$message.success(res.message);
          _this.getEmployeeList();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.employee_content {
  width: 100%;
  display: flex;

  .left_tree {
    min-width: 240px;
    border: 1px solid #f2f2f2;
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .right_content {
    flex: 1;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

.tree_btn_box {
  margin-bottom: 10px;
}

.tree_node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .btn {
    display: none;
  }
}

.tree_node:hover {
  .btn {
    display: block;
  }
}

.el_tree {
  font-size: 12px;
}
</style>
